<template>
	<div class="content">
		<add-tip :tip="tip" :duration="duration" />
		<div class="titles">
			<img class="logos" src="https://pic.imgdb.cn/item/666bb706d9c307b7e92a2e09.png" alt="" />
			&nbsp;
			<span>视频平台去水印工具</span>
		</div>
		<div class="uni-add-tips-content">本工具仅用于学习交流，请勿用于商业用途，否则后果自负。</div>
		<div class="input">
			<input placeholder="请输入链接" v-model="value" />
		</div>
		<div class="bottombtn">
			<div v-for="item in bottombtndata" :key="item.id">
				<!-- :open-type="item.btnid == 7 ? 'share' : ''" -->
				<button @tap="tapbtn(item.btnid)" :style="{color:item.color}"  class="btnclass" type="default">{{item.btnname}} </button>
			</div>
		</div>
		<div class="clickbtn">
			<button type="button" @click="outwatermark">点击解析</button>
		</div>
		<div class="download" v-if="downdata.title">
			<div class="top">
				<div class="lable"><span>标题/标签：</span><span @click="copy(downdata.title)">复制文案</span></div>
				<div class="title">{{downdata.title}}</div>
			</div>
			<div class="photo">
				<div class="lable"><span>封面：</span><span @click="download(downdata.photo, '2')">下载</span></div>
				<image :src="downdata.photo" alt="" class="image" mode="widthFix" />
			</div>
			<div class="header">
				<div class="left">
					<span class="name" v-if="downdata.pics.length === 0 ">视频内容</span>
					<span class="name" v-else>图集内容</span>
				</div>
				<div class="right">
					<span class="downloadlink" @click="download(downdata.downurl, '1')">下载</span>
					<span @click="copy(downdata.url2)">复制链接</span>
				</div>
			</div>
			<div class="content">
				<video :src="downdata.url2"></video>
			</div>
		</div>
	</div>
</template>

<script>
	 import addTip from "./components/struggler-uniapp-add-tip"
	export default {
		components: {
			addTip
		},
		data() {
			return {
			    tip:"点击[添加小程序]，下次访问更便捷",
				duration:1,
				value:'',
				downdata:{},
				bottombtndata:[{btnid:"5",btnname:"清空内容", color:"red"},
				{btnid:"6",btnname:"关注我们",color:"blue"},
				{btnid:"7",btnname:"分享好友",color:"green"}]
			}
		},
		onLoad() {

		},
		methods: {
		tapbtn(btnid) {
			console.log('点击了按钮',btnid);
			if (btnid == 5) {
				this.value = ''
				uni.showToast({
					title: '内容已清除！',
					icon: 'none',
					duration: 1500
				})  
			}
			if (btnid == 6) {
				console.log('关注公众号,跳转页面')
				uni.navigateTo({
					url:'/pages/guanzhu/index'
				})
			}
			if (btnid == 7) {
				console.log('diaoyongonShareAppMessage');
				// this.onShareAppMessage()
			}
		},
		// onShareAppMessage(res) {
		// 	console.log('res',res);
		// 	return {
		// 		title: '这款去水印小程序超好用！关键是免费！',
		// 		path: '/pages/index/index',
		// 		imageUrl: '/static/logo.png'
		// 	}
		// },
		onShareAppMessage() {  
		  return {  
			title: '这款去水印小程序超好用！关键是免费！',  
			path: '/pages/index/index',  
			imageUrl: '/static/logo.png',  
			success: function (res) {  
			  // 转发成功  
			  console.log('转发成功', res);  
			},  
			fail: function (err) {  
			  // 转发失败  
			  console.log('转发失败', err);  
			}  
		  };  
		},  
		onShareTimeline() {  
		  return {  
			title: '这款去水印小程序超好用！关键是免费！',  
			query: 'query',  
			success: function (res) {  
			  // 分享成功  
			  console.log('分享到朋友圈成功', res);  
			},  
			fail: function (err) {  
			  // 分享失败  
			  console.log('分享到朋友圈失败', err);  
			}  
		  };  
		},
		async download (file, status) {
			console.log('点击了dowmload',file, status);
			await uni.showLoading({
				title:'下载中，请稍等~'
			})
			uni.downloadFile({
			  url: file,
			  success: (data) => {
			  if (data.statusCode === 200) {
				  if (status == '1') {
				  uni.saveVideoToPhotosAlbum({
					filePath:data.tempFilePath,
					success(res) {
					  uni.showToast({
						icon:"none",
						title:'保存成功',
					  })
					  uni.hideLoading()
					}
				  })  	
				  } else if (status == '2') {
					  uni.saveVideoToPhotosAlbum({
						filePath:data.tempFilePath,
						success(res) {
						  uni.showToast({
							icon:"none",
							title:'保存成功',
						  })
						  uni.hideLoading()
						}
					})  
				  }
			  }
			},
			fail: (err) => {
				uni.hideLoading()
			}
		  });
		},
		copy (data) {
		  uni.setClipboardData({
			data,
			success:()=>{//点击复制内容的后调函数
			}
		  });
		},
		outwatermark(){
			console.log('点击了解析', this.value);
			uni.showLoading({
				title:'解析中,请稍等~'
			})
			if(!this.value){
		      uni.showToast({
				title: '请先粘贴链接！',
				icon: 'none'
			  })  
			} else {
				const urlRegex = /https?:\/\/[^\s\/$.?#].[^\s]*/g; 
				const urls = this.value.match(urlRegex);  
				console.log('urls',urls);
				if (urls && urls.length >0) {
					uni.request({
					  url: 'https://videoapi.funjs.top/api/parseUrl/query',
					  method: 'GET',
					  header: {
						'Content-Type': 'application/json'
					  },
					  data: {url: urls[0], userIp:'', platform:'web'},
					  success: (res)=> {
						this.downdata = res.data.data
						console.log(this.downdata)
						uni.hideLoading()
						uni.showToast({
							title: '解析成功！建议复制链接到浏览器下载！',
							icon: 'none',
							duration: 2000
						})  
						return res.data.data
					  },
					  fail: (err)=> {
						console.log('请求失败', err);	
						uni.hideLoading()
						uni.showToast({
						  title: '接口请求失败！',
						  icon: 'none',
						}) 
						return err
					  }
					});
				} else {
				  uni.showToast({
					title: '请粘贴完整链接！',
					icon: 'none',
				  })  
				}
			}
		}
	},
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
.uni-add-tips-content{
	padding: 0 20px;
	
}
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
		display: flex;
		text-align: center;
	}
	.titles{
		width: 80%;
		margin: 0 auto;
		font-size: 24px;
		color: #000;
		padding: 20px;
		display: flex;
		.logos{
			width: 35px;
			height: 32px;
			object-fit: cover;
		}
	}
	.btnclass{
		background-color: #f5f5ff;
		margin-left: 10px;
		margin-top: 15px;
	}
	.input{
		height: 50px;
		min-width: 250px;
		border-radius: 8px;
		margin-top: 20px;
		padding-left: 3px;
		border: 2px solid #8f8f94;
	}
	.bottombtn{
		display: flex;
		justify-content: center;
	}
	.clickbtn{
		margin: 15px 0;
	}
	.download{
		width: 90%;
		margin: 0 auto;
		border-radius: 10px;
		border: 3px solid #f5f5ff;
		padding: 10px;
		.top{
			margin: 0 auto;
			width: 80%;
		}
		.lable{
			display: flex;
			padding: 10px 0;
			justify-content: space-between;
		}
		.photo{
			margin: 0 auto;
			width: 80%;
			.image{
				margin: 0 auto;
				width: 100%;
				padding: 5px 10px;
			}
		}
		.header {
			margin: 0 auto;
			display: flex;			
			justify-content: space-between;
			flex-wrap: wrap;
			width: 80%;
			padding: 10px;
			.left{
				flex: 1;
			}
			.right{
				display: flex;
				justify-content: space-evenly;
				.downloadlink{
					margin-right: 20px;
				}
			}
		}
		.title{
			font-size: 16px;
			margin: 0 auto;
			color: #000;
			display: -webkit-box; /*弹性伸缩盒子模型显示*/
			-webkit-box-orient: vertical; /*排列方式*/ 
			-webkit-line-clamp: 1; /*显示文本行数(这里控制多少行隐藏)*/
			overflow: hidden; /*溢出隐藏*/
		}
		.body{
			margin: 0 auto;
			width: 80%;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
		}
	}
</style>
